<template>
  <ReportPage mode="report" v-if="props.mode == 'report'">
    <q-card
      flat
      class="my-report card-radius q-ma-sm"
      v-if="props.mode == 'report'"
    >
      <div class="q-pa-md">
        <div class="page-header cap">
          Monthly summary of equipment outgoing record
        </div>
        <div class="row justify-left items-center q-my-md">
          <div class="weight">Year:</div>
          <q-select
            v-model="year"
            :options="inputOptionStore.yearOptions"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
        </div>

        <div class="row justify-left items-center q-my-md">
          <div class="weight">Month:</div>
          <q-select
            v-model="month"
            :options="monthOptions"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
        </div>
        <q-card-actions>
          <q-btn label="generate" class="default-btn" @click="initData">
          </q-btn>
        </q-card-actions>
      </div>
      <div class="row justify-center items-center ">
        <!-- <div id="main" style="height: 800px; width: 100%"></div> -->
        <q-card-section style="height: 800px; width: 95vw">
          <v-chart class="chart" :option="option" autoresize />
        </q-card-section>
      </div>
      <q-table
        class="my-table"
        wrap-cells
        style="width: 95vw"
        flat
        bordered
        :columns="columns"
        :rows="filterRows"
        :pagination="{ rowsPerPage: 15 }"
        row-key="id"
        no-data-label="No stock item found."
        no-results-label="The filter didn't uncover any results"
      >
      </q-table>
    </q-card>
  </ReportPage>
  <q-card
    v-if="props.mode=='dashboard'"
    style="height: 100%"
  >
    <q-card-section style="height: calc(100% - 50px)">
      <v-chart class="chart" :option="option" autoresize />
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import VChart, { THEME_KEY } from 'vue-echarts';
import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import {
  PieChart,
  LineChart,
  BarChart,
  SunburstChart,
  MapChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  // SingleAxisComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
} from 'echarts/components';
import { outgoingRecord, repairingOverview } from 'src/services/reportService';
import ReportPage from 'src/pages/ReportPage.vue';
import { useInputOption } from 'src/stores/inputOptionStore';
import { ref, provide, computed, onMounted, reactive } from 'vue';
import { OutgoingRecord } from 'src/services/type';
import { formatDateTimeString } from 'src/utils/dateUtils';

const props = withDefaults(
  defineProps<{
    mode: 'report' | 'dashboard';
  }>(),
  {
    mode: 'report',
  }
);

const inputOptionStore = useInputOption();
const curMonth = new Date().getMonth() + 1;

inputOptionStore.init();
inputOptionStore.initYears(2018);

const rows = ref<OutgoingRecord[]>([]);
const latest =
  inputOptionStore.yearOptions[inputOptionStore.yearOptions.length - 1];
const year = ref(latest);

const month = ref(curMonth.toString());
const monthOptions = [
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12',
];

const filterRows = computed(() => {
  return rows.value;
});
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight',
] as const;


let app: any = {};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption: BarLabelOption = {
      rotate: app.config.rotate as BarLabelOption['rotate'],
      align: app.config.align as BarLabelOption['align'],
      verticalAlign: app.config
        .verticalAlign as BarLabelOption['verticalAlign'],
      position: app.config.position as BarLabelOption['position'],
      distance: app.config.distance as BarLabelOption['distance'],
    };
    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    });
  },
};

type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;


const labelOption: BarLabelOption = {
  show: true,
  position: app.config.position as BarLabelOption['position'],
  distance: app.config.distance as BarLabelOption['distance'],
  align: app.config.align as BarLabelOption['align'],
  verticalAlign: app.config.verticalAlign as BarLabelOption['verticalAlign'],
  rotate: app.config.rotate as BarLabelOption['rotate'],
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {},
  },
};


const option = reactive({
  title: {
    text: `Distribution of Repair Time of Various System in CEWS ${month.value}-${year.value}`,
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['0 days', '1~7 days', '8~30 days', '31~60 days', '>60 days'],
    orient: 'horizontal',
    right: 0,
    bottom: 0,
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    right: 0,
    top: 150,
    feature: {
      mark: { show: true },
      dataView: { show: false, readOnly: false },
      magicType: { show: false, type: ['line', 'bar', 'stack'] },
      restore: { show: false },
      saveAsImage: { show: true },
    },
  },
  grid: { containLabel: true },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: [],
      axisLabel: {
        interval: 0,
        rotate: 30, //If the label names are too long you can manage this by rotating the label.
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '0 days',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '1~7 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '8~30 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '31~60 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '>60 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
  ],
});


</script>

<style scoped></style>
